<!--
author:        leishanfeng <1628316216@qq.com>
date:          2023-07-03 17:20:23
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
 <div class="borderomponent">
  <div class="borderomponent-box">
    <div class="borderomponent-box-left">
    </div>
    <div class="borderomponent-box-right">
    </div>
    <div class="borderomponent-box-bottom">
    </div>
    <slot></slot>
  </div>
 </div>
</template>
<script>

export default {
name:'borderomponent'
};
</script>
<style lang="scss">
.borderomponent{
    position: fixed;
    top: 110px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    &-box{
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, rgba(23,79,128,0) 0%, rgba(56,119,175,0.4) 100%);
    border: 1px solid rgba(0,160,255,0.5);
    position: relative;
        &-left{
        width: 38px;
        height:280px;
        position: absolute;
        left:-17px;
        bottom: -10px;
        background: url('~@/assets/borderomponent/leftborder.png') no-repeat;
        }
        &-right{
        width: 38px;
        height:284px;
        position: absolute;
        right:-18px;
        top: -10px; 
        background: url('~@/assets/borderomponent/rightborder.png') no-repeat;
        }
        &-bottom{
        width:53%;
        height:3px;
        position: absolute;
        left:23.5%;
        bottom:-1px; 
        background: url('~@/assets/borderomponent/bottomborder.png') no-repeat;
        }
    }
}
</style>
